
{% extends 'base.html' %}
{% block title %}首页{% endblock title %}

{% block content %}
    <div class="container py-2">
        <div class="row" data-masonry='{"percentPosition": true}'>
            {% for photo in photos %}
                <div class="col-4 py-2">
                    <div class="card hvr-float-shadow">
                        <a href="#" data-bs-toggle="modal" data-bs-target="#photo-{{ photo.id }}">
                            <img src="{{ photo.image.url }}" alt="" class="card-img">
                        </a>
                    </div>
                </div>
            {% endfor %}
        </div>

        <!-- 分页 -->
        <div class="row justify-content-center py-5">
            <span class="step-links paginator">
                {% if photos.has_previous %}
                    <a href="?page=1" class="paginator prevnext">&laquo;</a>
                    <a href="?page={{ photos.previous_page_number }}" class="paginator prevnext">
                        {{ photos.previous_page_number }}
                    </a>
                {% endif %}
                <span class="current">{{ photos.number }}</span>
                {% if photos.has_next %}
                    <a href="?page={{ photos.next_page_number }}" class="paginator prevnext">
                        {{ photos.next_page_number }}
                    </a>
                    <a href="?page={{ photos.paginator.num_pages }}" class="paginator prevnext">
                        &raquo;
                    </a>
                {% endif %}
            </span>
        </div>

        <!-- Modal -->
        {% for photo in photos %}
            <div class="modal fade" id="photo-{{ photo.id }}">
                <div class="modal-dialog modal-dialog-centered modal-lg">
                    <div class="modal-content">
                        <div class="modal-body">
                            <img src="{{ photo.image.url }}" alt="" class="card-img">
                        </div>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
{% endblock content %}

<!-- 分页样式 -->
{% block scripts %}
<style>
    .paginator {
        color: white;
        text-align: center;
        text-decoration: none;
    }
    .prevnext {
        font-size: x-large;
    }
    .current {
        font-size: xx-large;
        padding-left: 10px;
        padding-right: 10px;
    }
</style>
<!--解决图片加载延迟-造成图片全堆叠在一起的显示错误。方法: 再一次触发 masonry.js 插件的排版估算 -->
<script type="text/javascript">
    $(window).on('load', function(){
        $('#cards').masonry({
            // options
            itemSelector: '.grid-item'
        })
    })
</script>
{% endblock scripts %}